import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';

import '../BodyDataInput.scss';
import LayoutView, { LayoutMode } from '../../layout';
import { SelectItemList, SelectItem } from '../../common-ui-parts';
import { BodyItemConstant as BiC } from '../../../constants/InputItemConstants';
import { BodyDataInputContextConstant } from '../../../constants/ComponentContextConstants';
import { MultipleValidationCategory as MvC } from '../../../validations/BodyDataInputValidation';
import CommonConstants from '../../../constants/CommonConstants';

// 質問に関するイラスト
import imgQ5 from './images/imgQ5.png';

/**
 * Q05.飲酒量
 */
class Question05 extends Component {
  getChildContext() {
    const {
      [BiC.ALCOHOL_AMOUNT_BEER]: beer,          // 飲酒量（ビールまたは発泡酒）
      [BiC.ALCOHOL_AMOUNT_WINE]: wine,          // 飲酒量（ワイン）
      [BiC.ALCOHOL_AMOUNT_SAKE]: sake,          // 飲酒量（日本酒）
      [BiC.ALCOHOL_AMOUNT_SHOCHU]: shochu,      // 飲酒量（焼酎または泡盛）
      [BiC.ALCOHOL_AMOUNT_WHISKEY]: whiskey,    // 飲酒量（ウィスキーまたはブランデー）
      [BiC.ALCOHOL_HABIT]: habit,               // 飲酒習慣
      [BiC.ALCOHOL_FREQUENCY]: frequency,       // 飲酒頻度
    } = this.context.parent.inputData;
    return Object.freeze({
      parent: Object.freeze(Object.assign({}, this.context.parent, {
        // [次へ]ボタン無効条件：
        //   ・すべて未入力の場合
        //   ・飲酒習慣＝「飲まない」以外の場合
        //   ・飲酒頻度＝「月1日未満」以外の場合
        disabledNext: [beer, wine, sake, shochu, whiskey].every(input => input === undefined) &&
        habit !== BiC.ALCOHOL_HABIT.NO_DRINKING.value &&
        frequency !== BiC.ALCOHOL_FREQUENCY.MONTH_LESS1.value,
      })),
    });
  }

  shouldComponentUpdate(nextProps, nextState) {
    return CommonConstants.ALCOHOL_INDEXES.includes(this.context.parent.pageIndex);
  }

  scrollPageTop() {
    this.refs.layoutView.getWrappedInstance().scrollTop();
  }

  validatePage() {
    // 入力チェック（true:チェックOK）
    return this.context.parent.validateQuestionPage([
      BiC.ALCOHOL_AMOUNT_BEER,
      BiC.ALCOHOL_AMOUNT_WINE,
      BiC.ALCOHOL_AMOUNT_SAKE,
      BiC.ALCOHOL_AMOUNT_SHOCHU,
      BiC.ALCOHOL_AMOUNT_WHISKEY,
    ], [
      MvC.ALCOHOL_AMOUNT_BEER,
      MvC.ALCOHOL_AMOUNT_WINE,
      MvC.ALCOHOL_AMOUNT_SAKE,
      MvC.ALCOHOL_AMOUNT_SHOCHU,
      MvC.ALCOHOL_AMOUNT_WHISKEY,
      MvC.ALCOHOL_AMOUNT_ALL,
    ]);
  }

  render() {
    const { inputData, errorInfo, updateState } = this.context.parent;

    // 飲酒習慣＝「飲まない」、または、飲酒頻度＝「月1日未満」場合は、非活性
    const habit = inputData[BiC.ALCOHOL_HABIT], freq = inputData[BiC.ALCOHOL_FREQUENCY];
    const disabledInput = habit === BiC.ALCOHOL_HABIT.NO_DRINKING.value || freq === BiC.ALCOHOL_FREQUENCY.MONTH_LESS1.value;

    return (
      <LayoutView
        ref="layoutView"
        mode={LayoutMode.QUESTION}
        title="飲酒量"
        question={{
          no: 5,
          sentence: <p>1日にどのくらい飲みますか？<br />（飲んでいましたか？）<br />5つのお酒の種類から<br />普段の組み合わせを教えてください。</p>,
          illustSrc: imgQ5,
          illustHeight: 148,
        }}
        errorText={errorInfo.get(
          BiC.ALCOHOL_AMOUNT_BEER,
          BiC.ALCOHOL_AMOUNT_WINE,
          BiC.ALCOHOL_AMOUNT_SAKE,
          BiC.ALCOHOL_AMOUNT_SHOCHU,
          BiC.ALCOHOL_AMOUNT_WHISKEY,
          MvC.ALCOHOL_AMOUNT_BEER,
          MvC.ALCOHOL_AMOUNT_WINE,
          MvC.ALCOHOL_AMOUNT_SAKE,
          MvC.ALCOHOL_AMOUNT_SHOCHU,
          MvC.ALCOHOL_AMOUNT_WHISKEY,
          MvC.ALCOHOL_AMOUNT_ALL)}
        className="alcohol-amount"
      >
        {/* 入力項目非活性状態の場合には「メッセージ（入力不要案内のテキスト）」を表示 */}
        { disabledInput &&
          <div className="guidance-alcohol-amount">
            <p>飲酒頻度が月1日未満の場合は<br/>入力不要です。<br/>次の質問へお進みください。 </p>
          </div> }
        {/* 飲酒量 (ビールまたは発泡酒) */}
        <dl className={classNames('content column', { 'disabled': disabledInput })}>
          <dt>{BiC.ALCOHOL_AMOUNT_BEER.label}</dt>
          <dd>
            <SelectItemList
              name={BiC.ALCOHOL_AMOUNT_BEER}
              value={inputData[BiC.ALCOHOL_AMOUNT_BEER]}
              disabled={disabledInput}
              placeholder="選択してください"
              propagate={updateState}
            >
              {BiC.ALCOHOL_AMOUNT_BEER.choices.map((choice, index) => (
                <SelectItem key={index} value={choice.value} label={choice.label} />
              ))}
            </SelectItemList>
            <ul className="remark">
              <li>大瓶/633ml＝1本</li>
              <li>中瓶/500ml缶＝0.8本</li>
              <li>小瓶/350ml缶＝0.6本</li>
            </ul>
          </dd>
        </dl>
        {/* 飲酒量 (ワイン) */}
        <dl className={classNames('content column', { 'disabled': disabledInput })}>
          <dt>{BiC.ALCOHOL_AMOUNT_WINE.label}</dt>
          <dd>
            <SelectItemList
              name={BiC.ALCOHOL_AMOUNT_WINE}
              value={inputData[BiC.ALCOHOL_AMOUNT_WINE]}
              disabled={disabledInput}
              placeholder="選択してください"
              propagate={updateState}
            >
              {BiC.ALCOHOL_AMOUNT_WINE.choices.map((choice, index) => (
                <SelectItem key={index} value={choice.value} label={choice.label} />
              ))}
            </SelectItemList>
            <ul className="remark">
              <li>1杯＝100ml</li>
            </ul>
          </dd>
        </dl>
        {/* 飲酒量 (日本酒) */}
        <dl className={classNames('content column', { 'disabled': disabledInput })}>
          <dt>{BiC.ALCOHOL_AMOUNT_SAKE.label}</dt>
          <dd>
            <SelectItemList
              name={BiC.ALCOHOL_AMOUNT_SAKE}
              value={inputData[BiC.ALCOHOL_AMOUNT_SAKE]}
              disabled={disabledInput}
              placeholder="選択してください"
              propagate={updateState}
            >
              {BiC.ALCOHOL_AMOUNT_SAKE.choices.map((choice, index) => (
                <SelectItem key={index} value={choice.value} label={choice.label} />
              ))}
            </SelectItemList>
            <ul className="remark">
              <li>1合＝180ml</li>
            </ul>
          </dd>
        </dl>
        {/* 飲酒量 (焼酎または泡盛) */}
        <dl className={classNames('content column', { 'disabled': disabledInput })}>
          <dt>{BiC.ALCOHOL_AMOUNT_SHOCHU.label}</dt>
          <dd>
            <SelectItemList
              name={BiC.ALCOHOL_AMOUNT_SHOCHU}
              value={inputData[BiC.ALCOHOL_AMOUNT_SHOCHU]}
              disabled={disabledInput}
              placeholder="選択してください"
              propagate={updateState}
            >
              {BiC.ALCOHOL_AMOUNT_SHOCHU.choices.map((choice, index) => (
                <SelectItem key={index} value={choice.value} label={choice.label} />
              ))}
            </SelectItemList>
            <ul className="remark">
              <li>原液の量 1合＝180ml</li>
              <li>チューハイ350ml＝0.7合</li>
            </ul>
          </dd>
        </dl>
        {/* 飲酒量 (ウィスキーまたはブランデー) */}
        <dl className={classNames('content column', { 'disabled': disabledInput })}>
          <dt>{BiC.ALCOHOL_AMOUNT_WHISKEY.label}</dt>
          <dd>
            <SelectItemList
              name={BiC.ALCOHOL_AMOUNT_WHISKEY}
              value={inputData[BiC.ALCOHOL_AMOUNT_WHISKEY]}
              disabled={disabledInput}
              placeholder="選択してください"
              propagate={updateState}
            >
              {BiC.ALCOHOL_AMOUNT_WHISKEY.choices.map((choice, index) => (
                <SelectItem key={index} value={choice.value} label={choice.label} />
              ))}
            </SelectItemList>
            <ul className="remark">
              <li>シングル1杯＝30ml</li>
            </ul>
          </dd>
        </dl>
      </LayoutView>
    );
  }

}

Question05.contextTypes = BodyDataInputContextConstant;
Question05.childContextTypes = Question05.contextTypes;

/*Question05.propTypes = {
  index: PropTypes.number,    // 自ページINDEX（0～）
};*/

export default Question05
